<!--
 * @Author: Lzx
 * @Date: 2022-03-06 18:31:29
 * @LastEditors: Lzx
 * @LastEditTime: 2022-04-15 10:28:36
 * @FilePath: /web-vue/src/components/Upload/uploadFile.vue
 * @Description: 文件上传（文档类）
-->
<template>
  <div>
    <el-upload
      ref="elUpload"
      :action="`${this.$store.state.API_ROOT}api/file/upload/document`"
      drag
      :multiple="false"
      :with-credentials="true"
      :on-success="handleUploadSuccess"
      :on-remove="handleRemove"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
  </div>
</template>

<script>
export default {
  props: ["dialogImageUrl"],
  data() {
    return {
      dialogVisible: false,
    };
  },

  methods: {
    //   文件上传成功回调
    handleUploadSuccess(response, file, fileList) {
      let { status, message, data } = response;
      if (status == 200) {
        this.$emit("afterUpload", data);
        this.$message({
          message: `上传成功！${message}`,
          type: "success",
          center: true,
          duration: 1680,
        });
      } else if (status == 403) {
        this.$message({
          message: `权限不足！${message}`,
          type: "error",
          center: true,
          duration: 1680,
        });
        // this.$router.push("/login");
      } else {
        this.$alert(`操作失败！${message}`, "【文档上传】", {
          type: "error",
          confirmButtonText: "确定",
          callback: (action) => {},
        });
      }
    },

    // 移除文档
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },

    // 清除上传文件列表
    clearUploadedFileList() {
      this.$refs["elUpload"].clearFiles();
    },
  },
};
</script>

<style></style>
